
.g-upload {
  width: 100%;

  .n-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    margin-top: 3px;
    background: var(--datav-gui-component-bgcolor);

    &:hover {
      background: var(--datav-gui-component-bgcolor-hover);
    }
  }

  .n-upload-trigger,
  .n-upload-dragger,
  .n-spin-container,
  .n-spin-content,
  .g-upload-image-wrap {
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: transparent;
  }

  .g-upload-image-content {
    width: 100%;
    height: 100%;
    padding: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .g-upload-image-cover {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--datav-gui-font-color-base);

    span {
      cursor: pointer;

      &:hover {
        color: var(--datav-gui-hover-color);
      }
    }
  }

  .g-upload-tip {
    color: var(--datav-gui-font-color-base);
  }
}
